<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			
		/* 	img[alt^=abc]{
				color: red;
			} */
		/* 	img[alt|=abc]{
				color: green;
			} */
			
			/* img[alt$=abc]{
				color: blue;
			} */
			
			img[alt*=abc]{
				color: red;
			}
			img[alt~=abc]{
				color: green;
			}
			
			
			
		</style>
	</head>
	<body>
		<!-- 
		 1.属性的取值是以什么开头的
		 [attribute^=value]  css3
		  [attribute|=value]   
		  两者之间的区别 
		  css2只能找到value开头,并且value是被-和其他内容隔开的才可以找到
		  css3中的只要是value开头的都可以找到,无论有没有被-隔开
		  
		  
		 2.属性的取值是以什么结尾的
		 [attribute$=value] css3
		 
		 3.属性的取值是否包含某个特定值
		 [attribute~=value] css2
		 [attribute*=value] css3
		 
		 区别：
		 css2 只能找到value 被空格隔开的 只能找到独立的单词
		 
		 
		 -->
		
		
		<!-- <img src="" alt="abcdef">
		<img src="" alt="abc-www">
		<img src="" alt="abc ppp">
		<img src="" alt="defabc">
		<img src="" alt="ppp abc">
		<img src="" alt="www-abc">
		<img src="" alt="qq">
		<img src="" alt="yy"> -->
		
		
		
		
		<img src="" alt="wwwabcmmm">
		<img src="" alt="wwwmmmabc">
		<img src="" alt="abcwwwmmm">
		<img src="" alt="www-abc-mmm">
		<img src="" alt="www abc mmm">
		<img src="" alt="qq">
 
	</body>
</html>